<template>
	<div class="weixin-page">
		<div class="bind-weixin" v-if="isFirst">
			<!-- <el-button @click="getWeixinUrl">点击授权消息推送</el-button> -->
			
			<div class="bind-weixin-tips">
				<i class="el-icon-loading"></i>
				<span>正在获取微信授权，请稍后.....</span>
			</div>
		</div>
		
		<template v-if="!isFirst">
			<div class="bind-weixin-success" v-if="isSuccess">
				<i class="el-icon-success"></i>
				
				<h3>微信授权成功！</h3>
				<p>搜索关注【17蜗大数据】公众号，<br>可以更方便的接受消息哦~</p>
				
				<el-button @click="goBack">点击返回</el-button>
			</div>
			
			<div class="bind-weixin-success" v-if="isFail">
				<i class="el-icon-error"></i>
				<h3>微信授权失败！请稍后再试</h3>
				
				<el-button @click="getWeixinUrl">点击授权消息推送</el-button>
			</div>
		</template>
	</div>
</template>

<script>
	import Cookies from 'js-cookie'
	import wx from 'weixin-js-sdk'
	import { getWeinxinUrl, saveWeixinOpenid } from '@api/weixin/auth'
	export default {
		data() {
			return {
				codeQuery: '',
				id: '',
				isFirst: true, //是否第一次打开
				isSuccess: false, //是否成功
				isFail: false, //失败
			}
		},
		methods: {
			getWeixinUrl() { //获取拿微信openid的url
				let params = {
					redirectUri: `https://${window.location.host}/#/weixin?id=${this.id}`, //重定向地址 链接地址必须带http开头的完整链接
					scope: 'snsapi_userinfo', //授权类型：获取openId: snsapi_base 获取完整wx信息：snsapi_userinfo
				}
				
				getWeinxinUrl(params)
					.then(res => {
						//location.replace在微信里面没用，所以先退回之前的页面
						if(window.history.length <= 1) {
							window.history.replaceState(null, null, '#/weixin');
						} else {
							this.$router.go(-1);
						}
						
						let url = res.data; //微信返回的链接
						window.location.replace(url);
					})
					.catch(() => {
						this.isFirst = false;
						this.isFail = true;
					})
			},
			saveWeixinOpenid() { //提交微信code
				saveWeixinOpenid({
					code: this.codeQuery,
					abc: this.id,
				})
					.then(() => {
						Cookies.remove('codeQuery'); //清除掉标识
						this.isFirst = false;
						this.isSuccess = true;
						this.isFail = false;
					})
					.catch(() => {
						this.isFirst = false;
						this.isFail = true;
					})
			},
			
			goBack() {
				Cookies.remove('noFirst');
				wx.miniProgram.navigateBack(-1);
			}
		},
		created() {
			//判断是否微信跳转过来的链接
			let path = window.location.href;
			
			if(path.indexOf('/#/') < 0 && path.indexOf('?code') > 0) {
				//如果是微信跳转过来的，先重新组装链接地址，提取openid
				let urlHeader = window.location.host; //链接host
				
				let url = path.split('?')[1]; //截取?后面的部分
				let urlQuery = url.split('&')[0]; //链接的参数 微信传过来的
				let redirect = path.split('/')[4]; //重定向跳转地址
				
				let codeQuery = urlQuery.split('=')[1]; //微信openid
				Cookies.set('codeQuery', codeQuery); //保存微信openid在缓存
				
				let fullUrl;
				if(redirect.indexOf('?') > 0) { //注：有些重定向的地址是带参数的，openid要用&拼接在后面
					//带参数，用 & 拼接
					fullUrl = 'https://' + urlHeader + '/#/' + redirect + '&' + urlQuery;
				} else {
					//不带参数，用 ? 拼接
					fullUrl = 'https://' + urlHeader + '/#/' + redirect + '?' + urlQuery
				}
				// window.location.replace(fullUrl); //跳转到重组的地址
				
				Cookies.set('noFirst', 1); //设置tag
				
				//保存openid
				this.id = Cookies.get('id');
				this.codeQuery = Cookies.get('codeQuery');
				this.saveWeixinOpenid();
				
			} else if(Cookies.get('noFirst')) {
				//有tag，返回小程序
				this.goBack();
			} else {
				//第一次进入授权页面
				this.id = this.$route.query.id;
				Cookies.set('id', this.id); //保存id在缓存
				this.getWeixinUrl();
				
				if(Cookies.get('noFirst')) {
					Cookies.remove('noFirst');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.weixin-page {
		max-width: 360px;
		margin: 0 auto;
	}
	
	.bind-weixin {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		display: flex;
		padding: 140px 0 30px 0;
		
		.bind-weixin-tips {
			align-items: center;
			justify-content: center;
			display: flex;
			
			span {
				font-size: 16px;
				margin-left: 8px;
			}
			.el-icon-loading {
				font-size: 30px ;
			}
		}
	}
	
	.bind-weixin-success {
		flex-direction: column;
		align-items: center;
		display: flex;
		padding: 100px 0 0 0;
		
		h3 {
			font-size: 18px;
			margin-top: 30px;
		}
		p {
			font-size: 14px;
			color: #999;
			text-align: center;
			margin-top: 12px;
		}
		
		.el-icon-success {
			font-size: 84px;
			color: #1aad19;
		}
		.el-icon-error {
			font-size: 84px;
			color: #f56c6c;
		}
		.el-button {
			margin-top: 30px;
		}
	}
</style>